import React, { PureComponent } from 'react';
import { Modal, Form, Select, Input, InputNumber, Upload, Icon, message } from 'antd';
import Base64 from '../../../../utils/Base64';
const Mock = require('mockjs')
var MockRandom = Mock.Random;
const { Option } = Select;
const FormItem = Form.Item
const formItemLayout = {
    labelCol: {
        span: 6,
    },
    wrapperCol: {
        span: 14,
    },
}

class usesModal extends PureComponent {
    componentDidMount(){
        const { modal = {} } = this.props
        if(modal.id){
            let img = modal.avatar.replace('#', "")
            this.setState({imageUrl:img})
        }
    }
    state = {
        loading: false,
        imageUrl: null
    }
    handleOk = () => {
        const { modal = {}, handleOk, form } = this.props
        const { imageUrl } = this.state
        const { validateFields, getFieldsValue } = form
        validateFields(errors => {
            if (errors) {
                return
            }
            if( imageUrl === '' ){
                return message.error('上传商品图')
            }
            const data = {
                res: {
                    id: modal.id || new Date().getTime(),
                    ...getFieldsValue(),
                    createTime: modal.createTime || MockRandom.datetime()
                },
                fun: Object.keys(modal).length > 0 ? 'upDate' : 'add'
            }
            data.res.avatar = imageUrl || modal.avatar
            handleOk(data)
        })
    }
    imageUrlChange = info => {
        Base64(info).then(data=>{
            this.setState({loading:true})
            this.setState({imageUrl:data})
            this.setState({loading:false})
        })
    };
    beforeUpload = (file) => {
        const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png';
        if (!isJpgOrPng) {
            message.error('You can only upload JPG/PNG file!');
        }
        const isLt2M = file.size / 1024 / 1024 < 2;
        if (!isLt2M) {
            message.error('Image must smaller than 2MB!');
        }
        return false;
    }
    render() {
        const { visible, confirmLoading, modal, showModal, form } = this.props;
        const { getFieldDecorator } = form
        const { loading, imageUrl } = this.state
        const uploadButton = (
            <div>
                <Icon type={loading ? 'loading' : 'plus'} />
                <div className="ant-upload-text">Upload</div>
            </div>
        );
        return (
            <div>
                <Modal
                    title={Object.keys(modal).length > 0 ? '修改' : '新增'}
                    visible={visible}
                    onOk={this.handleOk}
                    confirmLoading={confirmLoading}
                    onCancel={showModal}
                >
                    <Form layout="horizontal">
                        <FormItem label='jan_code' hasFeedback {...formItemLayout}>
                            {getFieldDecorator('jan_code', {
                                initialValue: modal.jan_code,
                                rules: [
                                    {
                                        required: true,
                                    },
                                ],
                            })(<Input />)}
                        </FormItem>
                        <FormItem label='名称' hasFeedback {...formItemLayout}>
                            {getFieldDecorator('name', {
                                initialValue: modal.name,
                                rules: [
                                    {
                                        required: true,
                                    },
                                ],
                            })(<Input />)}
                        </FormItem>
                        <FormItem label='相片' hasFeedback {...formItemLayout}>
                            {getFieldDecorator('avatar', {
                                getValueFromEvent: this.imageUrlChange
                            })(<Upload
                                listType="picture-card"
                                beforeUpload={this.beforeUpload}
                                showUploadList={false}>
                                {imageUrl ? <img src={imageUrl} alt="avatar" style={{ width: '100%' }} /> : uploadButton}
                            </Upload>)}
                        </FormItem>
                        <FormItem label='单价' hasFeedback {...formItemLayout}>
                            {getFieldDecorator('price', {
                                initialValue: modal.price,
                                rules: [
                                    {
                                        required: true,
                                    },
                                ],
                            })(<InputNumber />)}
                        </FormItem>
                        <FormItem label='计量' hasFeedback {...formItemLayout}>
                            {getFieldDecorator('product_unit', {
                                initialValue: modal.product_unit,
                                rules: [
                                    {
                                        required: true,
                                    },
                                ],
                            })(<Select>
                                <Option value="个">个</Option>
                                <Option value="箱">箱</Option>
                                <Option value="件">件</Option>
                                <Option value="盒">盒</Option>
                                <Option value="块">块</Option>
                                <Option value="本">本</Option>
                                <Option value="条">条</Option>
                            </Select>)}
                        </FormItem>
                        <FormItem label='库存' hasFeedback {...formItemLayout}>
                            {getFieldDecorator('product_count', {
                                initialValue: modal.product_count,
                                rules: [
                                    {
                                        required: true,
                                    },
                                ],
                            })(<InputNumber />)}
                        </FormItem>
                    </Form>
                </Modal>
            </div>
        );
    }
}

usesModal = Form.create({
    mapPropsToFields(props) {
        const { modal } = props;
        const { createFormField } = Form
        return {
            jan_code: createFormField(modal.jan_code),
            name: createFormField(modal.name),
            avatar: createFormField(modal.avatar),
            price: createFormField(modal.price),
            product_unit: createFormField(modal.product_unit),
            product_count: createFormField(modal.product_count)
        };
    }
})(usesModal);

export default usesModal